@import "../../sassmixins/mixins";

html, body {
  @include square(100%);
}

body {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
}

.container {
  position: relative;
  @include square(100%);
  display: none;
  .cloud-l {
    background-image: url("../image/cloud-l.png");
    background-size: 100% 100%;
    @include size(px2rem(160px), px2rem(214px));
    position: absolute;
    left: 0;
    top: px2rem(209px);
  }

  .cloud-r {
    background-image: url("../image/cloud-r.png");
    background-size: 100% 100%;
    @include size(px2rem(105px), px2rem(106px));
    position: absolute;
    right: 0;
    top: px2rem(285px);
  }

  .word {
    background-image: url("../image/word.png");
    background-size: 100% 100%;
    @include size(px2rem(569px), px2rem(406px));
    position: absolute;
    left: px2rem(134px);
    top: px2rem(60px);
  }

  .bg-mo {
    background-image: url("../image/bg-mo.png");
    background-size: 100% 100%;
    @include size(px2rem(750px), px2rem(589px));
    position: absolute;
    left: 0;
    top: px2rem(375px);
    z-index: -1;

    &.myani {
      -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 1deg);
      transform: perspective(300px) rotate3d(1, 0, 0, 1deg);
      -webkit-animation-name: flipInmy;
      animation-name: flipInmy;
    }
  }

  .green-house {
    background-image: url("../image/green-house.png");
    background-size: 100% 100%;
    @include size(px2rem(212px), px2rem(393px));
    position: absolute;
    left: 0;
    top: px2rem(533px);
    z-index: -1;
  }

  .red-house {
    background-image: url("../image/red-house.png");
    background-size: 100% 100%;
    @include size(px2rem(242px), px2rem(397px));
    position: absolute;
    top: px2rem(533px);
    right: 0;
    z-index: -1;
  }

  .buycart-l {
    background-image: url("../image/buycart-l.png");
    background-size: 100% 100%;
    @include size(px2rem(230px), px2rem(209px));
    position: absolute;
    left: px2rem(52px);
    top: px2rem(743px);
    z-index: -1;
  }

  .buycart-r {
    background-image: url("../image/buycart-r.png");
    background-size: 100% 100%;
    @include size(px2rem(205px), px2rem(186px));
    position: absolute;
    top: px2rem(767px);
    right: px2rem(110px);
    z-index: -1;
  }

  .person {
    background-image: url("../image/person.png");
    background-size: 100% 100%;
    @include size(px2rem(415px), px2rem(600px));
    position: absolute;
    top: px2rem(393px);
    left: px2rem(171px);
    transform-origin: center bottom;
    z-index: 10;
    -webkit-animation-name: flipInmy;
    animation-name: flipInmy;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
  }

  @-webkit-keyframes flipInmy {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
    }
  }

  @keyframes flipInmy {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -1deg);
    }
  }

  .bg-mo {

  }

  .cloud-l, .cloud-r {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }

  .green-house, .red-house {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;

  }

  .buycart-l, .buycart-r {

    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }

  .person, .word {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }

  .begin, .rule, .click-area, .begin-disabled, .end-word, .toplist-btn, .toplist-word {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    z-index: 20;
  }

  .begin {
    background-image: url("../image/begin.png");
    background-size: 100% 100%;
    @include size(px2rem(307px), px2rem(135px));
    position: absolute;
    left: px2rem(81px);
    bottom: px2rem(55px);
  }

  .rule {
    background-image: url("../image/rule.png");
    background-size: 100% 100%;
    @include size(px2rem(307px), px2rem(135px));
    position: absolute;
    left: px2rem(388px);
    bottom: px2rem(55px);
  }

  .click-area {
    background-image: url("../image/click-word.png");
    background-size: 100% 100%;
    @include size(px2rem(367px), px2rem(73px));
    position: absolute;
    left: 5rem - px2rem(183px);
    bottom: 0;
    z-index: 21 !important;
  }

  .begin-disabled {
    background-image: url("../image/begin-disabled.png");
    background-size: 100% 100%;
    @include size(px2rem(277px), px2rem(85px));
    position: absolute;
    left: px2rem(81px);
    bottom: px2rem(105px);
  }

  .end-word {
    background-image: url("../image/prize-tip.png");
    background-size: 100% 100%;
    @include size(10rem, px2rem(92px));
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .toplist-btn {
    background-image: url("../image/top-list-btn.png");
    background-size: 100% 100%;
    @include size(px2rem(293px), px2rem(110px));
    position: absolute;
    left: px2rem(81px);
    bottom: px2rem(81px);
  }

  .toplist-word {
    background-image: url("../image/toplist-tip.png");
    background-size: 100% 100%;
    @include size(10rem, px2rem(92px));
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.loading {
  position: fixed;
  @include square(100%);
  background-image: url("../image/load-bg.jpg");
  background-size: 100% 100%;
  top: 0;
  left: 0;

  .cart {
    background-image: url("../image/loading-cart.png");
    background-size: 100% 100%;
    @include size(px2rem(59px), px2rem(52px));
    top: px2rem(500px);
    left: px2rem(136px);
    position: absolute;

  }

  .line {
    top: px2rem(552px);
    left: px2rem(185px);
    height: px2rem(4px);
    width: px2rem(382px);
    background-color: #ffffff;
    position: absolute;

  }

  .word {
    top: px2rem(564px);
    position: absolute;
    text-align: center;
    color: #ffffff;
    font-size: px2rem(28px);
    line-height: 1;
    width: 10rem;
  }

}